import {Component, ViewChild} from '@angular/core';
import {NavController} from 'ionic-angular';
import {FormControl, FormBuilder, FormGroup, Validators} from '@angular/forms';
import {ControlsCheck} from '../../common/controlsCheck';
import {CONST} from '../../common/const';
import {ToastController, Slides, Platform} from 'ionic-angular';
import {HttpProvider} from '../../common/http';
import {LoginProvider} from '../../providers/login/login';
import {ProductProvider} from '../../providers/product/product';
import {Contacts, ContactFieldType} from '@ionic-native/contacts';
import {InAppBrowser, InAppBrowserObject} from '@ionic-native/in-app-browser';
import {StatusBar} from '@ionic-native/status-bar';
import {ThemeableBrowser, ThemeableBrowserOptions, ThemeableBrowserObject} from '@ionic-native/themeable-browser';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  @ViewChild('slides') slides: Slides

  private defaultShow: boolean = false

  private registerForm: FormGroup
  private canSub: Boolean
  private canSendCode: Boolean = true
  private sendTime: number = CONST.CODE_TIME
  private sendTimer: any

  private show: boolean = this.defaultShow

  constructor(public navCtrl: NavController,
              private iab: InAppBrowser,
              private themeableBrowser: ThemeableBrowser,
              private cc: ControlsCheck,
              private toast: ToastController,
              private http: HttpProvider,
              private contacts: Contacts,
              private statusBar: StatusBar,
              private platform: Platform,
              private loginProvider: LoginProvider,
              private productProvider: ProductProvider,
              private fb: FormBuilder) {
    this.createForm()
  }

  createForm() {
    this.registerForm = this.fb.group({
      phone: ['13958750139', Validators.compose([Validators.required, Validators.pattern(CONST.REG_PHONE)])],
      // password: ['', Validators.compose([Validators.required, Validators.pattern(CONST.REG_PASSWORD)])],
      code: ['', Validators.compose([Validators.required])],
    })
  }

  sendCode() {
    if (!this.canSendCode) return

    this.cc.toastMsg('验证码已发送，请注意查收')
    this.canSendCode = false

    this.sendTimer = setInterval(() => {
      this.sendTime--
      if (this.sendTime < 0) {
        clearInterval(this.sendTimer)
        this.canSendCode = true
        this.sendTime = CONST.CODE_TIME
      }
    }, 1000)
  }

  getVerityCode() {
    this.loginProvider.getVerityCode().then(() => {

    })
  }

  submit() {
    if (this.registerForm.valid) {
      let params = this.registerForm.value
      this.loginProvider.login(params)
    } else {
      this.cc.check(this.registerForm.controls, {
        phone: '请输入正确的手机号',
        code: '请输入正确的验证码',
        password: '密码需由6-20位数字、字母组合'
      })
    }
  }

  getProduct() {
    this.productProvider.getList().then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
  }

  getContacts() {
    this.contacts.find([
      'displayName'
    ], {
      filter: '',
      multiple: true
    }).then(data => {
      console.log(data)
    }).catch(err => {
      console.log(err)
    })
  }

  clearStorage() {
    this.http.clearTokenStorage()
  }

  gotoBaidu() {
    // const browser = this.iab.create('http://www.baidu.com/','_self',{
    //   location: 'yes',
    //   zoom: 'no',
    //   hardwareback: 'yes',
    //   toolbar: 'no',
    //   transitionstyle: 'crossdissolve'
    // });

    const options: ThemeableBrowserOptions = {
      statusbar: {
        color: '#ffffffff'
      },
      toolbar: {
        height: 50,
        color: '#ffffff'
      },
      title: {
        color: '#000000ff',
        showPageTitle: true
      },
      backButton: {
        image: 'back',
        imagePressed: 'back',
        align: 'left',
        event: 'backPressed'
      },
      forwardButton: {
        image: 'forward',
        imagePressed: 'forward',
        align: 'left',
        event: 'forwardPressed'
      },
      closeButton: {
        image: 'close',
        imagePressed: 'close',
        align: 'left',
        event: 'closePressed'
      },
      customButtons: [
        {
          image: 'share_long',
          imagePressed: 'share_long',
          align: 'right',
          event: 'sharePressed'
        }
      ],
      // menu: {
      //   image: 'menu1',
      //   imagePressed: 'menu1_pressed',
      //   title: 'Test',
      //   cancel: 'Cancel',
      //   align: 'right',
      //   items: [
      //     {
      //       event: 'helloPressed',
      //       label: 'Hello World!'
      //     },
      //     {
      //       event: 'testPressed',
      //       label: 'Test!'
      //     }
      //   ]
      // },
      backButtonCanClose: true
    };

    const browser: ThemeableBrowserObject = this.themeableBrowser.create('https://www.baidu.com', '_self', options);

    browser.on('sharePressed').subscribe(() => {
      console.log('分享')
    })

  }

  ionViewDidLoad() {
    let pW = this.platform.width()
    let offsetW = (pW - 330) / 2
    //在这里设置 slides 配置
    this.slides.slidesPerView = 'auto'
    this.slides.slidesOffsetBefore = offsetW
    this.slides.slidesOffsetAfter = offsetW
  }

  ionViewWillEnter() {
    this.statusBar.styleDefault()

    this.statusBar.backgroundColorByHexString('#00000000')
  }
}
